<div nz-row>
  <div nz-col nzSpan="24">
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">时间范围：</div>
      <div nz-col nzSpan="15">
        <nz-range-picker [(ngModel)]="queryDate" [nzRanges]="ranges" nzShowTime
                         nzFormat="yyyy/MM/dd HH:mm:ss"></nz-range-picker>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">指标名称：</div>
      <div nz-col nzSpan="15">
        <nz-select style="width: 200px;" nzShowSearch nzServerSearch nzPlaceHolder="输入指标名称查询" [nzShowArrow]="false"
                   [(ngModel)]="selectedMetric" [nzFilterOption]="nzFilterOption"
                   (nzOnSearch)="onMetricSerach($event)" (ngModelChange)="queryTagKeyOfMetric()">
          <nz-option *ngFor="let metric of metrics" [nzLabel]="metric" [nzValue]="metric">
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">统计函数：</div>
      <div nz-col nzSpan="9">
        <nz-select style="width: 200px;" [(ngModel)]="selectedAggregator" nzPlaceHolder="统计函数">
          <nz-option *ngFor="let aggregator of aggregators" [nzLabel]="aggregator.label"
                     [nzValue]="aggregator.value"></nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;">
      <div nz-col nzSpan="3">分组标签：</div>
      <div nz-col nzSpan="9">
        <nz-select style="width: 300px;" [(ngModel)]="groupBys" nzMode="multiple" nzPlaceHolder="最多支持三个分组属性">
          <nz-option *ngFor="let groupBy of tagsOfMetric" [nzLabel]="groupBy" [nzValue]="groupBy"></nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row style="margin-bottom: 20px;" *ngFor="let tag of tags; let i = index">
      <div nz-col nzSpan="3">标签名称：</div>
      <div nz-col nzSpan="4">
        <nz-select style="width: 150px;" [(ngModel)]="tags[i].tagKey">
          <nz-option *ngFor="let groupBy of tagsOfMetric" [nzLabel]="groupBy" [nzValue]="groupBy"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="2">标签值：</div>
      <div nz-col nzSpan="12">
        <nz-select style="width: 400px;" nzShowSearch nzServerSearch nzPlaceHolder="" [nzShowArrow]="false"
                   [(ngModel)]="tags[i].tagValue" [nzFilterOption]="nzFilterOption"
                   (nzOnSearch)="queryTagValueOfMetric(i,$event)">
          <nz-option *ngFor="let tagValue of tagValues" [nzLabel]="tagValue" [nzValue]="tagValue">
          </nz-option>
        </nz-select>
        <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="deleteTag(i,$event)"></i>
      </div>
    </div>
    <div nz-row style style="margin-bottom: 20px;">
      <div nz-col nzSpan="3"></div>
      <div nz-col nzSpan="21">
        <button nz-button nzType="dashed" style="width:60%" (click)="addTag($event)">
          <i nz-icon nzType="plus"></i>增加标签
        </button>
      </div>
    </div>
    <div nz-row>
      <div nz-col nzSpan="12">
        <button nz-button nzBlock="true" nzType="primary" nzBlock (click)='onSearch()'>查询</button>
      </div>
    </div>
  </div>
</div>
<nz-divider nzText=""></nz-divider>
<div nz-row>
  <div nz-col nzSpan="24">
    <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [(update)]="updateFlag"
                      [oneToOne]="true" style="width: 100%; height: 400px; display: block;"></highcharts-chart>
  </div>
</div>
